<template>
    <div class="map_view" @dblclick="goBack">
        <div id="map" style="width: 8.8542rem;height: 6.25rem;"></div>
    </div>
</template>

<script setup lang="ts">
import { inject, onMounted } from 'vue';
import { MapDatasApi } from '@/api/map';
import pinyin from "pinyin";
// 1.初始化地图内容
let echarts = inject('echarts');
// 在生命周期中初始化城市的数据
onMounted(() => {
    // 初始化全国地图
    initMapFn()
})
let initMapFn = (): void => {
    // DOM元素的获取
    var mapDom = echarts.init(document.getElementById('map'));
    // resize
    window.addEventListener('resize', () => {
        mapDom.resize();
    })
    // 调取全国地图的数据
    allCityFun(mapDom)
}
let allCityFun = async (mapDom: any) => {
    let rel = await MapDatasApi({ city: 'china' });
    // console.log(rel);
    // console.log(mapDom);
    // 注册全国地图
    echarts.registerMap('china', rel.data.data);
    let options = {
        roam: true,
        // 地图的坐标系相应的数据内容
        geo: {
            map: 'china',
            itemStyle: {
                areaColor: '#0c1632',
                borderColor: '#076c92',
                // 虚线
                // borderType: 'dashed',
                // borderType: 'dotted',
                borderType: [2, 2],
                borderWidth: 1

            },
            label: {
                show: true,
                color: '#fff'
            },
        },
        series: {
            // 带有涟漪效果的标识图形
            type: 'effectScatter',
            name: '舆情重点区域',
            // 使用地理坐标系
            coordinateSystem: 'geo',
            data: [
                {
                    name: '北京',
                    value: [116.405285, 39.904989],
                },
                {
                    name: '郑州',
                    value: [113.65, 34.76]
                }, {
                    name: '内蒙古',
                    value: [111.670801, 40.818311]
                }
            ],
            // 涟漪效果设置
            rippleEffect: {
                // 缩放的比例
                scale: 5,
                // 波纹的数量
                number: 3,
                brushType: 'stroke'

            }
        }

    };
    mapDom.setOption(options);
    // 加载具体城市的地图
    loadCityFun(mapDom)

}
// 加载具体城市的方案
let loadCityFun = (mapDom: any) => {
    // DOM元素的获取
    mapDom.on('click', async (params) => {
        console.log(params);
        // 中文转拼音-使用pinyin插件进行转换
        let cityName = pinyin(params.name, {
            style: 'normal'
        }).join('')
        // console.log(cityName);
        let rel = await MapDatasApi({ city: cityName })
        // console.log(rel);
        if (rel.data.status == 200) {
            console.log('进入');
            // 注册具体城市的地图
            echarts.registerMap(cityName, rel.data.data);
            console.log(rel.data.data);
            let options = {
                roam: true,
                // 地图的坐标系相应的数据内容
                geo: {
                    // 注册地图的名称需要修改与城市匹配的名称
                    map: cityName,
                    itemStyle: {
                        areaColor: '#0c1632',
                        borderColor: '#076c92',
                        // 虚线
                        // borderType: 'dashed',
                        // borderType: 'dotted',
                        borderType: [2, 2],
                        borderWidth: 1

                    },
                    label: {
                        show: true,
                        color: '#fff'
                    },
                    // 返回数据中有center的相关重点的精度和维度数据
                    // center: [
                    //     113.665412,
                    //     34.757975
                    // ],
                },

            };
            // 设置配置项
            // 当参数为true之前的配置项,全部删除
            mapDom.setOption(options, true);
        }
    })
}
// 双击返回全局地图
let goBack = () => {
    // DOM元素的获取
    var mapDom = echarts.init(document.getElementById('map'));
    // 调取全国地图的数据
    allCityFun(mapDom)
}
</script>

<style lang="less" scoped>
.map_view {
    width: 100%;
    height: calc(100% - 0.625rem);
    position: absolute;
    top: .625rem;
    left: 0;
    // // background-color: blue;
}
</style>
